<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showCateDiaLog">添加商品</el-button>
        </el-col>
      </el-row>

      <!-- 树形表格区域 -->
      <tree-table
        class="table-box"
        :data="cateList"
        :columns="createColumns"
        :border="true"
        show-index
        index-text="#"
        :expand-type="false"
        :selection-type="false"
      >
        <template slot="isok" scope="scope">
          <i class="el-icon-success" style="color:green" v-if="scope.row.cat_deleted === false"></i>
          <i class="el-icon-error" style="color:red" v-else></i>
        </template>

        <template slot="sort" scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level===0">标签一</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">标签二</el-tag>
          <el-tag type="warning" size="mini" v-else>标签三</el-tag>
        </template>

        <template slot="rate" scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="showEditCateHandle(scope.row.cat_id)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click=" removeCate(scope.row.cat_id) "
          >删除</el-button>
        </template>
      </tree-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="cateHandleSizeChange"
        @current-change="cateHandleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="cateDialogVisible" width="50%" @close="ceatDiaLogClosed">
      <!-- 添加分类对话框 -->
      <el-form ref="cateFormRef" :model="cateFromData" :rules="cateFromRules" label-width="80px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="cateFromData.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader
            v-model="selectaKes"
            :options="cascaderData"
            :props="cascaderProps"
            clearable
            @change="cascaderHandleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改分类对话框 -->
    <el-dialog title="修改分类" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form ref="editFormRef" :model="editFormData" :rules="editFromRules" label-width="80px">
        <el-form-item label="活动名称" prop="cat_name">
          <el-input v-model="editFormData.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CateClass",
  data() {
    return {
      //商品分裂列表数据
      cateList: [],
      //商品分裂列表数据查询信息
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      //商品分类列表数据总条数
      total: 0,
      // 表格列数据
      createColumns: [
        {
          label: "分类名称",
          prop: "cat_name"
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok"
        },
        {
          label: "排序",
          type: "template",
          template: "sort"
        },
        {
          label: "编辑",
          type: "template",
          template: "rate"
        }
      ],
      //显示与隐藏添加分类对话框属性
      cateDialogVisible: false,
      //获取下拉列表数据的参数
      cateFromData: {
        cat_pid: 0,
        cat_name: "",
        cat_level: 0
      },
      cateFromRules: {
        cat_name: [
          { required: true, message: "请输入要更改的名称", trigger: "blur" }
        ]
      },
      //下拉列表数据
      cascaderData: [],
      // 指定级联选择器的配置源
      cascaderProps: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
        checkStrictly: true
      },
      //下拉列表框的双向绑定数据
      selectaKes: [],
      //修改分类显示与隐藏对话框属性
      editDialogVisible: false,
      //修改分类对话框表单数据源
      editFormData: {
        cat_name: ""
      },
      //修改分类对话框表单验证规则
      editFromRules: {
        cat_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ]
      },
      cateID: 0
    };
  },

  created() {
    this.getCateClassList();
  },

  methods: {
    // 获取商品分类列表的数据
    async getCateClassList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryInfo
      });

      if (res.meta.status != 200)
        return this.$message.error("获取商品分类失败");

      this.cateList = res.data.result;
      this.total = res.data.total;
    },
    //商品分页页数选择方法
    cateHandleSizeChange(newPageSize) {
      this.queryInfo.pagesize = newPageSize;
      this.getCateClassList();
    },
    //商品分页当前页选择方法
    cateHandleCurrentChange(newPageNum) {
      this.queryInfo.pagenum = newPageNum;
      this.getCateClassList();
    },
    //显示与隐藏添加分类对话框方法
    showCateDiaLog() {
      this.getCascaderList();
      this.cateDialogVisible = true;
    },
    async getCascaderList() {
      const { data: res } = await this.$http.get("categories", {
        params: { type: 2 }
      });
      if (res.meta.status != 200)
        return this.$message.error("获取下拉列表数据失败");

      this.cascaderData = res.data;
    },
    cascaderHandleChange() {
      if (this.selectaKes.length > 0) {
        this.cateFromData.cat_pid = this.selectaKes[this.selectaKes.length - 1];
        this.cateFromData.cat_level = this.selectaKes.length;
        return;
      } else {
        this.cateFromData.cat_pid = 0;
        this.cateFromData.cat_level = 0;
        this.selectaKes = [];
      }
    },
    //关闭添加分类对话框
    ceatDiaLogClosed() {
      this.cateFromData.cat_pid = 0;
      this.cateFromData.cat_level = 0;
      this.$refs.cateFormRef.resetFields();
      this.selectaKes = [];
    },
    addCate() {
      this.$refs.cateFormRef.validate(async val => {
        if (!val) return;
        const { data: res } = await this.$http.post(
          "categories",
          this.cateFromData
        );
        if (res.meta.status != 201) {
          return this.$message.error("添加分类失败,请重试");
        }
        this.getCateClassList();
        this.$message.success("添加分类成功");
        this.cateDialogVisible = false;
      });
    },
    //打开修改分类方法对话框
    showEditCateHandle(id) {
      this.cateID = id;
      this.editDialogVisible = true;
    },
    // 修改分类的方法
    editCate() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        const { data: res } = await this.$http.put(
          "categories/" + this.cateID,
          this.editFormData
        );
        if (res.meta.status != 200)
          return this.$message.error("更改分类名称失败,请重试");
        this.getCateClassList();
        this.$message.success("更新分类名称成功");
        this.editDialogVisible = false;
      });
    },

    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 删除分类方法
    async removeCate(id) {
      const removeCateConfirm = await this.$confirm(
        "此操作将永久删除该分类, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(error => error);
      console.log(removeCateConfirm);

      if (removeCateConfirm != "confirm") {
        return this.$message.info("取消了删除分类");
      }
      const { data: res } = await this.$http.delete("categories/" + id);
      if (res.meta.status != 200) return this.$message.error("删除分类失败");
      this.$message.success("删除分类成功")
      this.getCateClassList();
    }
  }
};
</script>
<style lang="less" scoped>
.table-box {
  margin: 15px 0;
}
.el-cascader {
  width: 100%;
}
</style>